<template>
  <div class="h-full grid grid-cols-12">
    <!-- data -->
    <div class="h-full col-span-10 overflow-x-auto overflow-y-auto">
      <router-view />
    </div>

    <!-- right zone list -->
    <div class="h-full overflow-auto col-span-2 bg-[#ecf0f1] px-2">
      <div class="px-2 py-2 my-2 text-sm flex gap-1 items-center font-bold bg-[#34495e]">
        <ListView theme="outline" size="16" fill="#ddd" />
        区段列表
      </div>
      <router-link
        v-for="zone of zones"
        :key="zone.id"
        :to="{ name: 'zone-info', params: { zoneId: zone.id } }"
        class="bg-[#2980b9] flex items-center gap-1 my-2 px-2 rounded-sm cursor-pointer shadow-sm shadow-[#95a5a6]">
        <FileCode theme="outline" size="16" fill="#eee" />
        <div class="text-sm my-2 text-gray-300">{{ zone.name }}</div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import useZone from '@/composables/useZone'
import { FileCode, ListView } from '@icon-park/vue-next'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'

const route = useRoute()
const { all, zones } = useZone()

all({ projId: +route.params.id })

onBeforeRouteUpdate(async (to) => {
  const projId = +to.params.id
  await all({ projId })
})
</script>

<style></style>
